<template>
	<view class="content">
		<u-bar-height></u-bar-height>
		<uni-card :isFull="true" class="video_box" v-for="(item, index) in MVlist" :key="index" @tap="jump(item.id)">
			<view class="video_box_pic">
				<image :src="item.cover" mode=""></image>
			</view>
			<view class="video_box_title">{{item.name}}</view>
			<text class="iconfont icon-bofang_o play"></text>
		</uni-card>
	</view>
</template>

<script>
	import {video} from '@/API/API.js';
	import util from '@/utils/util.js';
	export default {
		data() {
			return {
				MVlist: []
			}
		},
		
		onLoad() {
			this.video();
		},
		
		methods: {
			video(){
				video({limit: 40}).then(data => {
					let result = data.data;
					let listArr = [];
					result.forEach(val => {
						let listObj = {};
						listObj['id'] = val['id'];
						listObj['name'] = val['name'] +' - '+ val['artistName'];
						listObj['cover'] = val['cover'];
						listArr.push(listObj);
					});
					
					this.MVlist = listArr;
				});
			},
			
			jump(id){
				util.jump('navigateTo', '/pages/mv/paly?mid='+ id);
			}
		}
	}
</script>

<style>
	@import url("@/static/css/iconfont.css");
	
	.video_box{
		width: 100%;
		padding: 0 !important;
		margin-bottom: 10px !important;
		border: 0 !important;
	}
	
	/deep/.uni-card{
		padding: 0 !important;
		margin-bottom: 10px !important;
		border: 0 !important;
	}
	
	/deep/.uni-card__content{
		padding: 0 !important;
	}
	
	.video_box .video_box_pic{
		width: 100%;
		height: 200px;
	}
	
	.video_box .video_box_pic image{
		width: 100%;
		height: 100%;
	}
	
	.video_box .video_box_title{
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		font-size: 14px;
		color: #fff;
		background-color: #0000008a;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
	.video_box .play{
		color: #fff;
		font-size: 46px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-20px, -20px);
	}
</style>